跳到主要内容

ESLint 规则配置结构

很好的观察!让我详细解释 ESLint 规则配置数组中的值:

ESLint 规则配置结构

规则配置的基本形式

ESLint 规则的值不是固定三个,而是:

'rule-name': [severity, ...options]
  • 第 1 个值:严重程度(必需)
  • 第 2+ 个值:规则的具体选项(可选,根据规则而定)

第一个值:严重程度(Severity Level)

可以是数字或字符串:

// 数字形式
'no-console': 0 // 关闭规则
'no-console': 1 // 警告
'no-console': 2 // 错误

// 字符串形式(推荐,更易读)
'no-console': 'off' // 关闭规则
'no-console': 'warn' // 警告(不会导致退出码为1)
'no-console': 'error' // 错误(会导致退出码为1)

对应关系:

  • 0 = 'off' = 关闭规则
  • 1 = 'warn' = 警告
  • 2 = 'error' = 错误

第二个及之后的值:规则选项

根据不同规则,选项的数量和类型都不同

示例 1:单个选项(2个值)

// 第1个值:严重程度
// 第2个值:规则选项
'semi': ['error', 'never']
// ^^^^^^ ^^^^^^
// 严重程度 选项:不使用分号

'quotes': ['error', 'single']
// ^^^^^^ ^^^^^^^^
// 严重程度 选项:使用单引号

示例 2:多个选项(3个值)

'quotes': ['error', 'single', { allowTemplateLiterals: true }]
// ^^^^^^ ^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// 严重程度 选项1 选项2(对象形式的额外配置)

'comma-dangle': ['error', 'never']
// ^^^^^^ ^^^^^^^
// 严重程度 选项

// 或者更复杂的
'comma-dangle': ['error', {
arrays: 'never',
objects: 'never',
imports: 'never',
exports: 'never',
functions: 'never'
}]
// ^^^^^^ ^^^^^^^^^^^^^
// 严重程度 选项对象

示例 3:复杂选项配置

'indent': ['error', 2, {
// ^^^^^^ ^ ^^^^^^^^^^^
// 严重程度 空格数 详细配置对象
SwitchCase: 1,
VariableDeclarator: 1,
outerIIFEBody: 1,
MemberExpression: 1,
FunctionDeclaration: { parameters: 1, body: 1 },
FunctionExpression: { parameters: 1, body: 1 },
CallExpression: { arguments: 1 },
ArrayExpression: 1,
ObjectExpression: 1,
ImportDeclaration: 1,
flatTernaryExpressions: false,
ignoreComments: false
}]

常见配置模式

模式 1:仅严重程度

'no-debugger': 'error'
// 或
'no-debugger': ['error'] // 等同于上面

模式 2:严重程度 + 一个选项

'semi': ['error', 'never']
'quotes': ['error', 'single']
'indent': ['error', 2]

模式 3:严重程度 + 选项 + 配置对象

'no-unused-vars': ['error', {
vars: 'all',
args: 'none',
ignoreRestSiblings: true
}]

模式 4:严重程度 + 多个选项

'max-len': ['error', 100, 2, {
// ^^^^^^ ^^^ ^ ^^^
// 严重程度 最大长度 tab宽度 额外配置
ignoreUrls: true,
ignoreComments: false
}]

从你的配置文件中的实际例子

    'indent': [ 'error', 2, {
SwitchCase: 1,
VariableDeclarator: 1,
outerIIFEBody: 1,
MemberExpression: 1,
FunctionDeclaration: { parameters: 1, body: 1 },
FunctionExpression: { parameters: 1, body: 1 },
CallExpression: { arguments: 1 },
ArrayExpression: 1,
ObjectExpression: 1,
ImportDeclaration: 1,
flatTernaryExpressions: false,
ignoreComments: false
} ],

解析:

  • 'error' - 严重程度
  • 2 - 使用 2 个空格缩进
  • { SwitchCase: 1, ... } - 详细的缩进配置对象
    'quotes': [ 'error', 'single', { allowTemplateLiterals: true } ],

解析:

  • 'error' - 严重程度
  • 'single' - 使用单引号
  • { allowTemplateLiterals: true } - 允许使用模板字符串
    '@typescript-eslint/no-unused-vars': [ 'error', { vars: 'all', args: 'none', ignoreRestSiblings: true } ],

解析:

  • 'error' - 严重程度
  • { vars: 'all', args: 'none', ignoreRestSiblings: true } - 配置对象

选项值的类型

第二个及之后的值可以是:

  1. 字符串'never''always''single''double'
  2. 数字2480100
  3. 对象{ key: value, ... }
  4. 数组['error', 'warn']
  5. 布尔值truefalse

总结

  • 不是固定三个值,而是:[严重程度, 选项1, 选项2, ...]
  • 第 1 个值(必需):严重程度 - 'off'/'warn'/'error'0/1/2
  • 第 2+ 个值(可选):规则的具体配置选项,类型和数量因规则而异
  • 不同规则需要的选项完全不同,需要查阅具体规则的文档